<template>
  <li class="card">
    <el-card shadow="hover" class="card_hover">
      <div class="card_heard claer">
        <div class="usre_data">
          <img src="../assets/img/logo.png" alt="" class="users" />
          <span>{{ lisData.author_name }}</span>
        </div>
        <h4 class="title">{{ lisData.title }}</h4>
      </div>
      <div class="card_main">{{ lisData.synopsis }}</div>
      <div class="card_foter">
        <el-button
          type="danger"
          icon="el-icon-message"
          circle
          class="btn"
          slot="reference"
          @click="openLeaveWordBtn"
        ></el-button>

        <!-- </el-popconfirm> -->
        <el-button
          type="success"
          icon="el-icon-check"
          circle
          @click="projectParticulars(lisData.id, lisData.author)"
          class="btn"
        ></el-button>
        <el-button
          :type="lisData.collect == 1 ? 'primary' : 'warning'"
          icon="el-icon-star-off"
          circle
          @click="collectBtn()"
          class="btn"
        ></el-button>
      </div>
    </el-card>
  </li>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      lisData: this.liData,
      openIndex: "",
      userData: {},
    };
  },
  name: "Card",
  props: ["liData"],
  created() {
    this.userData = JSON.parse(localStorage.getItem("token") || "{}");
  },
  mounted() {
  },
  methods: {
    //收藏按钮
    collectBtn() {
      if (this.lisData.collect == 1) {
        axios
          .post(`http://localhost:3000/collectWork`, {
            collectId: this.liData.c_id,
            collect: this.lisData.collect,
          })
          .then((ret) => {
            if (ret.data.code == 1) {
              this.lisData.collect = 0;
              this.$message({
                showClose: true,
                message: "取消收藏",
                type: "warning",
              });
              this.$forceUpdate();
            }
          });
      } else {
        axios
          .post(`http://localhost:3000/collectWork`, {
            userId: this.userData.u_id,
            works:  this.liData.id,
            type: 0,
            collect: this.lisData.collect,
          })
          .then((ret) => {
            if (ret.data.code == 1) {
              this.lisData.collect = 1;
              this.$message({
                showClose: true,
                message: "收藏成功",
                type: "success",
              });
              this.$forceUpdate();
            }
          });
      }
    },
    //项目详情按钮
    projectParticulars(id1, id2) {
      this.$router.push({
        path: "/Details/article",
        query: { article: id1, writerID: id2 },
      });
    },
    //留言按钮
    openLeaveWordBtn() {},
  },
};
</script>

<style>
.card {
  width: 300px;
  height: 200px;
}
.card_hover {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 20px;
  border: 1px solid #ddd;
  background-color: #fff;
}
.card_heard {
  width: 100%;
  height: 35%;
  box-sizing: border-box;
  border-bottom: 2px solid #333;
}
.usre_data {
  width: 70px;
  float: left;
  padding: 0 10px;
  box-sizing: border-box;
}
.users {
  width: 40px;
  height: 40px;
}
.title {
  width: 180px;
  margin-left: 20px;
  float: left;
  font: 20px/50px "";
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card_main {
  width: 100%;
  height: 40%;
  padding: 5px 10px;
  margin: 5px 0;
  overflow: hidden;
  text-indent: 2em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  box-sizing: border-box;
  border-bottom: 2px solid #333;
}
.card_foter {
  width: 100%;
  height: 20%;
  box-sizing: border-box;
}
.btn {
  margin-left: 10px;
  float: right;
}
.el-card__body {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
</style>
